﻿@model ScrumTracker.Models.Sprint
@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout2.cshtml";
}
@if (false)
{
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
@section head{
    <style type="text/css">
        ul > li
        {
            display: block;
            margin-top: 0.5em;
        }
        
        ul > li:first-child
        {
            margin-top: 0;
        }
        
        li > a.button
        {
            width: 190px;
        }
        
        body
        {
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.button').button();
            $('.draggable').draggable({
                cursorAt: { top: -5, left: -5 },
                helper: function (event) {
                    console.log($(this));
                    var row = this;

                    return $('<div class="ui-widget-header"></div>').text("Move issue #" + $(this).closest('tr').attr('issue_id')).appendTo('body');
                }
            });
            $(".droppable").droppable({
                tolerance: "pointer",
                hoverClass: "ui-state-active",
                drop: function (event, ui) {
                    //$(this).addClass("ui-state-highlight").text("Dropped!");
                    console.log($(ui.draggable).closest('tr').attr('issue_id'), $(this).attr('sprint_id'));
                    var issueId = $(ui.draggable).closest('tr').attr('issue_id');
                    var sprintId = $(this).attr('sprint_id');
                    var updateUrl = '@(Url.Action("Update", "Stories", new { id = "issue_id" }))'.replace('issue_id', issueId);

                    $.ajax({
                        url: updateUrl,
                        type: 'POST',
                        dataType: 'json',
                        data: JSON.stringify({ SprintId: sprintId }),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            $(ui.draggable).fadeOut(function () {
                                $(this).closest('tr').remove();
                            });
                        }
                    });
                }
            });

            $('.expandable').click(function () {
                var row = $(this).closest('tr');
                $('<td></td>').text('html').attr('colspan', 8).appendTo('<tr></tr>').insertAfter(row);
            });
        });
    </script>
}
<h1>@Model.Name</h1>
<hr />
<div class="ui-widget ui-widget-content ui-corner-all" style="float: left; padding: 0.2em;">
    <ul style="list-style-type: none; padding: 0; margin: 0;">
        <li>
            <a class="button" href="@Url.Action("Get", "Products", new { @id = Model.ProductId })">Backlog</a></li>
        <li>
            <hr />
        </li>
        @foreach (var sprint in Model.Product.Sprints.OrderByDescending(s => s.EndDate))
        {
            <li>
                <a class="button droppable @(Model.SprintId == sprint.SprintId ? "ui-state-highlight" : "")" href="@Url.Action("Get", "Sprints", new { @id = sprint.SprintId })" sprint_id="@sprint.SprintId">@sprint.Name</a></li>
        }
    </ul>
</div>
<div class="ui-widget ui-widget-content ui-corner-all" style="float: none; margin-left: 211px; padding: 0.2em;">
    <table border="1" cellspacing="0" cellpadding="0" style="width: 100%;">
        <tr>
            <td>
                Handle
            </td>
            <td>Expand
            </td>
            <td>
                Story
            </td>
            <td>
                Priority
            </td>
            <td>
                Effort
            </td>
            <td>
                Hours
            </td>
            <td>
                Comments
            </td>
            <td>
                Attachments
            </td>
            <td>
                Actions
            </td>
        </tr>
        @foreach (var story in Model.Stories.OrderByDescending(s => s.Priority).ThenBy(s => s.Effort))
        { 
            <tr issue_id="@story.IssueId">
                <td class="draggable" style="cursor: move;">
                    DRAG
                </td>
                <td class="expandable">
                    EXPAND
                </td>
                <td>
                    @story.Description
                </td>
                <td>
                    @story.Priority
                </td>
                <td>
                    @story.Effort
                </td>
                <td>
                    @story.Tasks.Sum(a => a.EstimatedHours)
                </td>
                <td>
                    3
                </td>
                <td>
                    @story.Attachments.Count
                </td>
                <td style="white-space: nowrap;">
                    <a class="button" href="@Url.Action("Edit", "Stories", new { @id = story.IssueId })">Edit</a> <a class="button" href="#">Delete</a>
                </td>
            </tr>
        }
    </table>
</div>
